<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<button>点我取消</button>
<body>
  <script>
    cancelButton = document.querySelector('button')
    class CancelToken {
      constructor(cancelFn) {
        this.promise = new Promise((resolve, reject) => {
          cancelFn(() => {
            resolve()
          })
        })
      }
    }
    function cancelPromise(delay) {
      return new Promise((resolve, reject) => {
        let id = setTimeout(resolve, delay)
        const cancelToken = new CancelToken((cancelCallBack) => {
          cancelButton.addEventListener('click', cancelCallBack)
        })
        cancelToken.promise.then(() => {
          console.log('promise被取消');
          clearTimeout(id)
        })
      })
    }
    cancelPromise(3000).then(res => {
      console.log('res');
    })
  </script>
</body>

</html>